<div class=" col-lg-12">
    <div class="container-fluid">

        <form class="form-inline" style="float:right;margin-left:20px;margin-bottom:0px" onsubmit="return false;">
            <div>

                <div class="btn-group input-group col-md-1 ">
                    <button id="chartSelectTime" type="button" class="btn btn-primary dropdown-toggle" data-time=15 data-type="minute" auto-time=0
                            data-toggle="dropdown" href="#"
                            aria-expanded="false">last 15 min <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a href="#" class="time-period" data-type="realtime" data-time="0"
                               onclick="setChartTimeButVal(this)">realtime</a></li>
                        <li class="divider"></li>
                        <li><a href="#" class="time-period" id="time-period-defalut" data-type="minute"
                               data-time="15" onclick="setChartTimeButVal(this)">last 15 min</a></li>
                        <li><a href="#" class="time-period" data-type="minute" data-time="30"
                               onclick="setChartTimeButVal(this)">last 30 min</a></li>
                        <li><a href="#" class="time-period" data-type="minute" data-time="45"
                               onclick="setChartTimeButVal(this)">last 45 min</a></li>
                        <li class="divider"></li>
                        <li><a href="#" class="time-period" data-type="hour" data-time="1"
                               onclick="setChartTimeButVal(this)">last 1 hour</a></li>
                        <li><a href="#" class="time-period" data-type="hour" data-time="3"
                               onclick="setChartTimeButVal(this)">last 3 hours</a></li>
                        <li><a href="#" class="time-period" data-type="hour" data-time="12"
                               onclick="setChartTimeButVal(this)">last 12 hours</a></li>
                        <li class="divider"></li>
                        <li><a href="#" class="time-period" data-type="day" data-time="1"
                               onclick="setChartTimeButVal(this)">last 1 day</a></li>
                        <li><a href="#" class="time-period" data-type="day" data-time="2"
                               onclick="setChartTimeButVal(this)">last 2 days</a></li>
                        <li><a href="#" class="time-period" data-type="day" data-time="3"
                               onclick="setChartTimeButVal(this)">last 3 days</a></li>
                        <li><a href="#" class="time-period" data-type="day" data-time="4"
                               onclick="setChartTimeButVal(this)">last 4 days</a></li>
                        <li><a href="#" class="time-period" data-type="day" data-time="5"
                               onclick="setChartTimeButVal(this)">last 5 days</a></li>
                        <li><a href="#" class="time-period" data-type="day" data-time="6"
                               onclick="setChartTimeButVal(this)">last 6 days</a></li>
                        <li class="divider"></li>
                        <li><a href="#" class="time-period" data-type="week" data-time="1"
                               onclick="setChartTimeButVal(this)">last 1 week</a></li>
                        <li><a href="#" class="time-period" data-type="week" data-time="2"
                               onclick="setChartTimeButVal(this)">last 2 weeks</a></li>
                        <li class="divider"></li>
                        <li><a href="#" class="time-period" data-type="month" data-time="1"
                               onclick="setChartTimeButVal(this)">last 1 month</a></li>
                    </ul>
                </div>
                <div class="date-control hide" style="top: 2px; margin-left: 5px; display: none;">
                    <input type="text" style="width:150px" class="input-small" placeholder="from" name="from"/>
                    <input type="text" style="width:150px" class="input-small" placeholder="to" name="to"/>
                    <button type="button" class="btn go">go</button>
                </div>
            </div>
        </form>
           <span style="display:inline-block;margin-left:20px;padding-top:10px;float:right;">

               <select id="brokerlist">
                   {% for cluster in cluster_bid_mapping %}
                       <option value="{{ cluster.bid }}" data-cluster="{{ cluster.clustername }}">
                           Cluster:{{ cluster.clustername }}.BrokerId({{ cluster.bid }})[{{ cluster.addr }}]
                       </option>
                   {% endfor %}

               </select>
               <input id="cb_total" value="total" type="checkbox"   onchange="show_chart(this)"/>
                <label for="cb_total" style="display:inline-block;">Total</label>
                <input id="cb_tps" value="tps" type="checkbox"    onchange="show_chart(this)" />
            <label for="cb_tps" style="display:inline-block;">TPS</label>
{#            <input id="cb_hit" value="hitrate" type="checkbox"/>#}
{#            <label for="cb_hit" style="display:inline-block;">Ext1</label>#}
{#            <input id="cb_keys" value="keyspace" type="checkbox"/>#}
{#            <label for="cb_keys" style="display:inline-block;">Ext2</label>#}
{#            <input id="cb_expire" value="kick" type="checkbox"/>#}
{#            <label for="cb_expire" style="display:inline-block;">Ext3</label>#}
{#            <input id="cb_slowlog" value="slowlog" type="checkbox"/>#}
{#            <label for="cb_slowlog" style="display:inline-block;">Ext4</label>#}
           </span>
    </div>

</div>


<div class="col-lg-12">
    <div class="panel panel-default"  id="total_chart_pannel"  >
        <div class="panel-heading">
            <h3 class="panel-title"><i class="fa fa-bar-chart-o fa-fw"></i> Total Chart</h3>
        </div>
        <div class="panel-body">
            <div id="morris-area-chart_total"
                 style="position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); height: 250px;">
            </div>

        </div>
    </div>
    <div class="panel panel-default"  id="tps_chart_pannel">
        <div class="panel-heading">
            <h3 class="panel-title"><i class="fa fa-bar-chart-o fa-fw"></i> TPS Chart</h3>
        </div>
        <div class="panel-body">
            <div id="morris-area-chart_tps"
                 style="position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); height: 250px;"></div>

        </div>
    </div>

</div>